<script setup>
import { ref, reactive, toRefs, toRef, shallowRef, shallowReactive, shallowReadonly, useAttrs, useModel, useSlots } from 'vue'

// const obj = reactive({
//     a: 1,
//     b: 2
// })
// //torefs
// const { a, b } = toRefs(obj)
// const a1 = toRef(obj, 'a');
// const b1 = toRef(obj, 'b');
// setTimeout(() => {
//     obj.a = 3
//     obj.b = 4

// }, 1000)


//shallowRef 浅层的响应式，只有覆盖整个对象才会触发响应式

/**
 初始调用 fun(100) ：
- 这是在组件初始化阶段执行的
- 此时模板系统正在进行依赖收集
- Vue的模板系统会追踪对 state.count 的访问
- 因此这个修改会被捕获并触发视图更新
 setTimeout中的 fun(2000) ：

- 这是在异步回调中执行的
- 此时组件已经完成了初始渲染
- shallowRef 的浅层响应式特性开始生效
- 直接修改 .value.count 不会触发视图更新
 */

const state = shallowRef({ count: 1, max: 1 })

// 不会触发更改
const fun = (e) => {
    state.value.count = e
}






const props = defineProps({
    title: {
        type: String,
        required: true
    }
})

// 自定义选项
const model = useModel(props, 'title',)
// console.log('useSlots()', useSlots().header())
console.log('useAttrs', useAttrs())




let bigObj = `
{
    "a":154551545515455154557
}
`

console.log(bigObj)

console.log(JSON.parse(bigObj, (key, value, ctx) => {
    if (key === 'a') {
        console.log(value)
        return ctx.source

    }

}))


</script>

<template>
    <div class="main">
        <div>
            {{ state.count }}

        </div>
        <slot name="header"></slot>


        <slot></slot>


        <input type="text" v-model="model">
    </div>
</template>

<style scoped lang="scss">
.main {
    width: 1200px;
    margin: 0 auto;
}
</style>